<template>
	<view>
		<view class="tabNav hasFlex">
			<view class="navItem xk" @tap='selectSub'>
				<text class="payTypeTxt">{{subName}}</text>
				<text class="iconfont icon-sanjiao"></text>
			</view>
			<view class="navItem cbs" @tap="selectGrade">
				<text class="payTypeTxt">{{gradeName}}</text>
				<text class="iconfont icon-sanjiao"></text>
			</view>
		</view>
		<uni-popup type="bottom" ref="filterPop">
			<view class="popuoView">
				<view class="popTit spaceBet">
					<view class="cancel" @tap="cancel">取消</view>
					<view class="sure" @tap="cancel">确定</view>
				</view>
				<view class="popupCon"> 
					<template v-if="opt == 'selSub'">
						<view class="subItem"
							:class="[subIndex == index ? 'active' : '']"
							v-for="(item,index) in subject"
							:key="index"
							@tap="selectCurrSub(index,item.id,item.value)"
						>{{item.value}}</view>
					</template>
					<template v-else>
						<view class="subItem"
							:class="[gradeIndex == index ? 'active' : '']"
							v-for="(item,index) in gradeArr"
							:key="index"
							@tap="selectCurrGrade(index,item.value)"
						>{{item.value}}</view>
					</template>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:{
			subName:String,
			gradeName:String
		},
		data(){
			return{
				subject:[
					{id:0,value:'全部'},{id:2,value:'数学'},{id:4,value:'物理'},
					{id:5,value:'化学'},{id:7,value:'生物'},{id:10,value:'生命科学'},{id:11,value:'科学'}],
				subIndex:0,
				gradeArr:[{id:0,value:'全部'},{id:1,value:'一年级'},
						{id:2,value:'二年级'},{id:3,value:'三年级'},{id:4,value:'四年级'},{id:5,value:'五年级'},
						{id:6,value:'六年级'},{id:7,value:'七年级'},{id:8,value:'八年级'},{id:9,value:'九年级'},
						{id:10,value:'高一'},{id:11,value:'高二'},{id:12,value:'高三'}],
				gradeIndex:0,
				opt:''
			}
		},
		methods:{
			selectCurrSub(index,id,subName){
				this.subIndex = index;
				this.$emit('selectCurrSub',id,subName);
				this.$refs.filterPop.close();
			},
			selectCurrGrade(index,gradeName){
				this.gradeIndex = index;
				this.$emit('selectCurrGrade',gradeName);
				this.$refs.filterPop.close();
			},
			selectSub(){
				this.openPop('selSub');
			},
			selectGrade(){
				this.openPop('selGrade');
			},
			openPop(opt){
				this.opt = opt;
				this.$refs.filterPop.open();
			},
			cancel(){
				this.$refs.filterPop.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popuoView{
		background: #fff;
	}
	.popupCon{
		padding: 30rpx 30rpx 10rpx;
		display: grid;
		column-gap: 20rpx;
		@include respTo(phone){
			grid-template-columns: repeat(4,1fr);
		}
		@include respTo(pad){
			grid-template-columns: repeat(5,1fr);
		}
		.subItem{
			width: 100%;
			@include respTo(phone){
				height: 66rpx;
				line-height: 66rpx;
				font-size:$font-size28;
			}
			@include respTo(pad){
				height: 46rpx;
				line-height: 46rpx;
				font-size:$padSize18;
			}
			text-align: center;
			border: 1rpx solid #eee;
			color: $pss-text-color8;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			&.active{
				color: $pss-color-blue;
				background: #e5f8ff;
				border: 1rpx solid #e5f8ff;
				font-weight: bold;
			}
		}
	}
	.popTit{
		padding: 0 30rpx;
		@include respTo(phone){
			height: 90rpx;
			line-height: 90rpx;
			font-size:$font-size30;
		}
		@include respTo(pad){
			height: 60rpx;
			line-height: 60rpx;
			font-size:$padSize20;
		}
		box-shadow: 0 5rpx 8rpx rgba(0,0,0,.02);
		.sure{
			padding-left: 100rpx;
			color: $pss-color-primary_1;
		}
		.cancel{
			padding-right: 100rpx;
			color: $pss-text-color8;
		}
	}
	.tabNav{
		width: 100%;
		@include respTo(phone){
			height: 90rpx;
			font-size:$font-size30;
		}
		@include respTo(pad){
			height: 60rpx;
			font-size:$padSize20;
		}
		background: #fff;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		/* #ifdef H5 */
		top: 83rpx;
		/* #endif */
		.xk{
			margin-left: 30rpx;
		}
		.cbs{
			margin-right: 30rpx;
		}
		.payTypeTxt{
			height: 90rpx;
			line-height: 90rpx;
			color: $pss-text-color8;
			@include respTo(phone){
				font-size: $font-size30;
			}
			@include respTo(pad){
				font-size: $padSize16;
			}
		}
		.icon-sanjiao{
			color: $pss-text-colora;
			@include respTo(pad){
				font-size: $padSize18;
			}
		}
	}
</style>